<template>
  <div class="relative">
    <page-loading></page-loading>
    <!-- <div class="vertical-align-flex mb20">
    	<div class="field">{{field}}：</div>
    	<div class="value">
    	  <div :class="['switch', {'switch-off': false}] "></div>
    	</div>
    </div> -->
    <os-switch :item="field" v-model="nat_switch" class="mb20"
    @handleSwitch="set_nat_acceleration"></os-switch>
    <div class="toolbar">
      <p v-for="(item, idx) in toolbar" :key="idx">{{(idx+1)+'.'+item}}</p>
    </div>
  </div>
</template>

<script>

  export default {

    data(){
      return {
        field: this.$t('network.nat.field'),
        toolbar: this.$t('network.nat.toolbar'),
        nat_switch: '0',
      }
    },
    methods: {
      get_nat_acceleration(){
        this.$req.get('/webapi?op=get_nat_acceleration').then(res=> {
          console.log(res)
          this.nat_switch = res.data.status
        })
      },
      set_nat_acceleration(){
        console.log(this.nat_switch)
        this.proxy_req('get' ,'/webapi?op=set_nat_acceleration', {status: this.nat_switch},
        res=> {
          if(res.code != "1"){
            return
          }
          this.get_nat_acceleration()
        }, true,)
      }
    },
    created() {
      this.$bus.emit('changeTab', 7)
      this.get_nat_acceleration()
    }
  }
</script>

<style lang="scss" scoped>

</style>
